<template>
  <div style="width: 100%;height: 100vh;overflow: hidden;" >

    <div style="width: 400px;margin:150px auto ">
      <div style="color: #1254cb;font-size: 100px;text-align: center;padding:30px 30px 0 30px;font-family: 'Pristina';font-weight: bold">welcome</div>
      <el-form ref="form" :model="form" :rules="rules">
        <el-form-item prop="username">

          <el-input placeholder="请输入用户名"  v-model="form.username">
           <template #prefix>
             <el-icon style="color: brown"><User/></el-icon>
           </template>
          </el-input>
        </el-form-item >
        <el-form-item prop="password">

          <el-input  placeholder="请输入密码" v-model="form.password" show-password>
            <template #prefix>
              <el-icon style="color: brown"><Lock/></el-icon>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="role">
          <el-radio v-model="form.role" label="admin" style="color: white">管理员</el-radio>
          <el-radio v-model="form.role" label="user" style="color: white">用户</el-radio>
        </el-form-item>
        <el-form-item>
          <el-button style="width: 45%;" type="primary" @click="login">登录</el-button>
          <el-button style="width: 45%;margin-left: 30px" type="primary"  @click="Register">注册</el-button>

        </el-form-item>

      </el-form>
    </div>

  </div>
  <div style="position: relative">
    <video  autoplay loop preload style="width: 100%;position:relative;bottom: 100vh;z-index: -1;">
      <source :src="videoUrl">
    </video>
  </div>

</template>

<script>
import { User ,Lock } from '@element-plus/icons-vue'
import request from "@/utils/request";


export default {
  name: "Login",
  components: {Lock, User},
  data(){
    return{
      videoUrl:require('../assets/css/video1.mp4'),
      form:{},
      rules:{
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' }
        ],
      }
    }
  },
  //清理sessionstorage中的缓存
  created() {
    sessionStorage.removeItem("user")
  },
  methods:{
    login(){
      //如果验证规则合法才能发送请求
      this.$refs['form'].validate((valid)=> {
        if(valid){
          alert('submit!')
        }
      })
      //如果登录角色是管理员
      if(this.form.role==="admin"){
        request.post("/api/admin/login",this.form).then(res => {
          if(res.code ==='0') {
            this.$message({
              type: "success",
              message: "登录成功"
            })
            console.log(this.form)
            //将表单中的数据传入到前端缓存中，方便其他页面调用
            sessionStorage.setItem("user",JSON.stringify(this.form.username))

            this.$router.push({
              path:"/admin_login",
            })
          }//登录成功之后进行页面跳转到主页
          else {
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }
      else if(this.form.role==="user"){
        request.post("/api/user/login",this.form).then(res => {
          if(res.code ==='0'){
            this.$message({
              type:"success",
              message:"登录成功"
            })
            sessionStorage.setItem("user",JSON.stringify(this.form.username))

            this.$router.push("/user_login")  //登录成功之后进行页面跳转到主页
          } else {
            this.$message({
              type:"error",
              message:res.msg
            })
          }
        })
      }
      else {
        request.post("/api/user/login",this.form).then(res => {
        this.$message({
          type:"error",
          message:"未选择身份"
        })
      })
      }

    },
    Register(){
      this.$router.push("/Register")
    }

  }
}
</script>

<style scoped>

</style>